<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width,initial-scale=1' />
	<style type="text/css">
		body,ul,p,li {
			padding: 0;
			margin: 0;
		}
		body {
		  font-family: "微软雅黑";
		  background: #c9cace;
		}
		ul li {
		  list-style: none;
		}
		a {
		  color: #000;
		  text-decoration: none;
		}
		header {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  background: #c9cace;
		}
		.show-box {
		  width: 90%;
		  height: 25px;
		  padding: 5px;
		  margin: 10px auto;
		  background-color: #fff;
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  -ms-box-sizing: border-box;
		  -o-box-sizing: border-box;
		  box-sizing: border-box;
		  -webkit-border-radius: 3px;
		  -moz-border-radius: 3px;
		  -ms-border-radius: 3px;
		  -o-border-radius: 3px;
		  border-radius: 3px;
		}
		.show-box .show {
		  display: inline-block;
		  width: 15px;
		  height: 15px;
		  margin: 0 5px;
		  background: url("./search.png") center no-repeat;
		  background-size: contain;
		}
		.show-box input {
		  float: right;
		  width: 80%;
		  height: 13px;
		  border: none;
		  outline: none;
		  font-size: 12px;
		  vertical-align: middle;
		}
		.province {
		  margin-top: 50px;
		}
		.province-list .province-letter {
		  display: block;
		  padding: 3px 20px;
		  font-size: 12px;
		  background-color: #eee;
		}
		.province-list p {
		  padding: 8px 20px;
		  border-bottom: 1px solid #eee;
		  background-color: #fff;
		}
		.letter {
		  position: fixed;
		  top: 45px;
		  right: 0;
		  width: 15px;
		  margin-right: 10px;
		  text-align: center;
		  font-size: 15px;
		  line-height: 20px;
		  /*transition: top .3s linear;*/
		}
		.letter li {
		  margin: 5px 0;
		}
		.hide {
			display: none;
		}
	</style>
</head>
<body>
	<section id='app'>
		<!--显示框-->
		<header>
			<div class="show-box">
				<span class='show'></span><input id='show-text' type='text' placeholder='省份' />
			</div>
		</header>

		<!--省份-->
		<div class='province' >
			<div class="province-list" v-for='item in province'>
				<span class="province-letter" id="{{item.letter}}Letter">{{item.letter}}</span>
				<p v-for='data in item.data' data-code="{{data.provinceCode}}" data-id="{{data.id}}" v-on:click='choice'>
					{{data.province}}
				</p>
			</div>
		</div>

		<!--城市-->
		<div class="city hide">
	    </div>
		<!--字母列表-->
		<div class='letter'>
			<ul>
		      <li v-for='item in province'>
			      <a href="#{{item.letter}}Letter">{{item.letter}}</a>
			      </li>
		    </ul>
		</div>
		<div clss='test' v-on:click="clickHandle2">test</div>
	</section>

<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
	window.onload = function(){
		// location.hash = 'province';
		// var letter = document.querySelector('.letter');
		// window.onscroll = function(){
		// 	if(document.documentElement.scrollTop > 45){
		// 		letter.style.top = '0px';
		// 	}else{
		// 		letter.style.top = '45px';
		// 	}
		// }
var intersect = function(nums1, nums2) {
    if(nums1.length === 0 || nums2.length === 0 || nums1 === null || nums2 === null){
        return ;
    }
    var len = nums2.length,
        newNum = [],
        i;
    for(i = 0; i < len; i++){
        if(nums1.length){
            var index = nums1.indexOf(nums2[i]);
            if(index !== -1 && !newNum[nums2[i]]){
                newNum[nums2[i]] = 1;
            }
        }
    }
    return newNum;
};
var nums1 = [1],
	nums2 = [1,1];
var a = intersect(nums1,nums2);
console.log(a);
		new Vue({
			el: '#app',
			data: {
				province: [{
				"letter": "A",
				"data": [{
					"province": "安徽省",
					"provinceCode": "340000",
					"id": 12
				}, {
					"province": "澳门特别行政区",
					"provinceCode": "820000",
					"id": 34
				}]
			}, {
				"letter": "B",
				"data": [{
					"province": "北京市",
					"provinceCode": "110000",
					"id": 1
				}]
			}, {
				"letter": "C",
				"data": [{
					"province": "重庆市",
					"provinceCode": "500000",
					"id": 22
				}]
			}, {
				"letter": "F",
				"data": [{
					"province": "福建省",
					"provinceCode": "350000",
					"id": 13
				}]
			}, {
				"letter": "G",
				"data": [{
					"province": "甘肃省",
					"provinceCode": "620000",
					"id": 28
				}, {
					"province": "广东省",
					"provinceCode": "440000",
					"id": 19
				}, {
					"province": "广西壮族自治区",
					"provinceCode": "450000",
					"id": 20
				}, {
					"province": "贵州省",
					"provinceCode": "520000",
					"id": 24
				}]
			}, {
				"letter": "H",
				"data": [{
					"province": "海南省",
					"provinceCode": "460000",
					"id": 21
				}, {
					"province": "河北省",
					"provinceCode": "130000",
					"id": 3
				}, {
					"province": "河南省",
					"provinceCode": "410000",
					"id": 16
				}, {
					"province": "黑龙江省",
					"provinceCode": "230000",
					"id": 8
				}, {
					"province": "湖北省",
					"provinceCode": "420000",
					"id": 17
				}, {
					"province": "湖南省",
					"provinceCode": "430000",
					"id": 18
				}]
			}, {
				"letter": "J",
				"data": [{
					"province": "吉林省",
					"provinceCode": "220000",
					"id": 7
				}, {
					"province": "江苏省",
					"provinceCode": "320000",
					"id": 10
				}, {
					"province": "江西省",
					"provinceCode": "360000",
					"id": 14
				}]
			}, {
				"letter": "L",
				"data": [{
					"province": "辽宁省",
					"provinceCode": "210000",
					"id": 6
				}]
			}, {
				"letter": "N",
				"data": [{
					"province": "内蒙古自治区",
					"provinceCode": "150000",
					"id": 5
				}, {
					"province": "宁夏回族自治区",
					"provinceCode": "640000",
					"id": 30
				}]
			}, {
				"letter": "Q",
				"data": [{
					"province": "青海省",
					"provinceCode": "630000",
					"id": 29
				}]
			}, {
				"letter": "S",
				"data": [{
					"province": "山东省",
					"provinceCode": "370000",
					"id": 15
				}, {
					"province": "山西省",
					"provinceCode": "140000",
					"id": 4
				}, {
					"province": "陕西省",
					"provinceCode": "610000",
					"id": 27
				}, {
					"province": "上海市",
					"provinceCode": "310000",
					"id": 9
				}, {
					"province": "四川省",
					"provinceCode": "510000",
					"id": 23
				}]
			}, {
				"letter": "T",
				"data": [{
					"province": "台湾省",
					"provinceCode": "710000",
					"id": 32
				}, {
					"province": "天津市",
					"provinceCode": "120000",
					"id": 2
				}]
			}, {
				"letter": "X",
				"data": [{
					"province": "西藏自治区",
					"provinceCode": "540000",
					"id": 26
				}, {
					"province": "香港特别行政区",
					"provinceCode": "810000",
					"id": 33
				}, {
					"province": "新疆维吾尔自治区",
					"provinceCode": "650000",
					"id": 31
				}]
			}, {
				"letter": "Y",
				"data": [{
					"province": "云南省",
					"provinceCode": "530000",
					"id": 25
				}]
			}, {
				"letter": "Z",
				"data": [{
					"province": "浙江省",
					"provinceCode": "330000",
					"id": 11
				}]
			}]},
			methods: {
				choice: function(e){
					var show = document.getElementById('show-text'),
						province = e.target.innerHTML.trim();
					show.value = province;
				},
				clickHandle1: function (){
					console.log('1');
				},
				clickHandle2: function (){
					console.log('2');
				}
			}
		})
	}
</script>
</body>
</html>